<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="searchForm" :inline="true">
        <el-form-item label="设备编号" prop="code">
          <el-input
            v-noSpace
            v-model="searchForm.equipmentNo"
            placeholder="设备编号"
            class="!rounded-button"
          />
        </el-form-item>

        <el-form-item label="设备类型" prop="productCode">
          <el-select
            v-model="searchForm.equipmentType"
            placeholder="设备类型"
            class="!w-32"
            clearable
            @change="handleQuery"
          >
            <el-option label=" 加工设备" value="加工设备" />
            <el-option label="包装设备" value="包装设备" />
            <el-option label="运输设备" value="运输设备" />
            <el-option label="检测设备" value="检测设备" />
          </el-select>
        </el-form-item>

        <el-form-item label="运行状态" prop="productCode">
          <el-select
            v-model="searchForm.status"
            placeholder="运行状态"
            class="!w-32"
            clearable
            @change="handleQuery"
          >
            <el-option label="运行中" value="运行中" />
            <el-option label="空闲" value="空闲" />
            <el-option label="故障" value="故障" />
            <el-option label="维修中" value="维修中" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
          <el-button icon="refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <div class="p-4 border-b border-gray-200">
        <span>共 {{ total }} 台设备</span>
      </div>

      <el-table :data="baseTable" style="width: 100%">
        <el-table-column prop="equipmentNo" label="设备编号" align="center" />
        <el-table-column prop="equipmentName" label="设备名称" align="center" />
        <el-table-column prop="equipmentType" label="设备类型" align="center" />
        <el-table-column prop="productionLine" label="生产线" align="center" />
        <el-table-column prop="status" label="当前状态" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" class="!rounded-button">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

// import { EpPropMergeType } from "element-plus/es/utils";

const searchForm = ref({
  pageSize: 10,
  pageNum: 1,

  equipmentNo: "",
  equipmentType: "",
  status: "",
});

const tableData = ref([
  {
    equipmentNo: "EQ-2024-001",
    equipmentName: "清洗机 CL2000",
    equipmentType: "加工设备",
    productionLine: "土豆生产线",
    status: "运行中",
    remark: "正常运行中",
  },
  {
    equipmentNo: "EQ-2024-002",
    equipmentName: "切片机 SL3000",
    equipmentType: "加工设备",
    productionLine: "土豆生产线",
    status: "空闲",
    remark: "待机状态",
  },
  {
    equipmentNo: "EQ-2024-003",
    equipmentName: "抽真空机 VM4000",
    equipmentType: "加工设备",
    productionLine: "毛豆生产线",
    status: "故障",
    remark: "真空泵故障维修中",
  },
  {
    equipmentNo: "EQ-2024-004",
    equipmentName: "清洗机 CL2500",
    equipmentType: "加工设备",
    productionLine: "胡萝卜生产线",
    status: "维修中",
    remark: "例行保养",
  },
]);

const total = ref(0);

const getStatusType = (status: string) => {
  const statusMap: Record<string, any> = {
    运行中: "success",
    空闲: "info",
    故障: "danger",
    维修中: "warning",
  };
  return statusMap[status] || "info";
};
const baseTable = ref(tableData.value);
const handleQuery = () => {
  // 实际项目中这里会调用接口
  console.log("查询条件:", searchForm.value);

  if (
    searchForm.value.equipmentNo == "" &&
    !searchForm.value.equipmentType &&
    !searchForm.value.status
  ) {
    baseTable.value = tableData.value;
  } else {
    baseTable.value = tableData.value.filter((item) => {
      return (
        item.equipmentNo.includes(searchForm.value.equipmentNo) &&
        item.equipmentType.includes(searchForm.value.equipmentType) &&
        item.status.includes(searchForm.value.status)
      );
    });
  }
  total.value = baseTable.value.length;
  //模拟查询
};

const handleReset = () => {
  searchForm.value = {
    pageSize: 10,
    pageNum: 1,
    equipmentNo: "",
    equipmentType: "",
    status: "",
  };
  handleQuery();
};
onMounted(() => {
  handleQuery();
});
</script>

<style scoped>
.el-select {
  width: 100%;
}
</style>
